<template>
 <div id="mydiv">
     <!--        搜索表单-->
     <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
         <el-form-item >
             <el-input v-model="SearchForm.name" placeholder="店铺名"></el-input>
         </el-form-item>
         <el-form-item >
             <el-input v-model="SearchForm.address" placeholder="店铺地址"></el-input>
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="initTable()">查询</el-button>
         </el-form-item>
     </el-form>
     <!--        表格回显-->
     <el-table
             :data="tableData"
             border
             style="width: 100%">
         <el-table-column
                 prop="id"
                 label="店铺编号">
         </el-table-column>
         <el-table-column
                 prop="name"
                 label="店铺名">
         </el-table-column>
         <el-table-column
                 prop="bname"
                 label="商家名称">
         </el-table-column>
         <el-table-column
                 prop="start"
                 label="状态">
             <template slot-scope="scope">
                 <el-button :type="scope.row.start==0?'success':'warning'" plain>{{scope.row.start==0?"营业":"整顿" }}</el-button>
             </template>
         </el-table-column>
         <el-table-column
                 prop="address"
                 label="店铺地址">
         </el-table-column>
         <el-table-column
                 align="center"
                 label="操作"
                 width="500px">
             <template slot-scope="scope">
                 <el-button type="primary" icon="el-icon-share" @click="detailedMsg(scope.row.id)">详细信息</el-button>
                 <el-button type="success" @click="editStart(scope.row.start,scope.row.id)">修改店铺状态</el-button>
             </template>
         </el-table-column>
     </el-table>
     <!--详细信息弹出层-->
     <el-dialog
             title="详细信息"
             :visible.sync="detaileVisiable"
             width="30%">
         <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
             <el-form-item label="营业执照" >
                 <el-upload
                         class="avatar-uploader"
                         action="/upload"
                         :show-file-list="false">
                     <img v-if="ruleForm.license" :src="ruleForm.license" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
             </el-form-item>
             <el-form-item label="商家电话" >
                 <el-input v-model="ruleForm.telephone"  readonly="readonly"></el-input>
             </el-form-item>
             <el-form-item label="开店时间" >
                 <el-input v-model="ruleForm.enterdate" readonly="readonly"></el-input>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
    <el-button @click="detaileVisiable = false">关闭</el-button>
  </span>
     </el-dialog>
     <!--        分页插件-->
     <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page.sync=this.SearchForm.currentPage
             :page-sizes="pageSizes"
             :page-size=this.SearchForm.pageSize
             layout="total, sizes, prev, pager, next, jumper"
             :total="total">
     </el-pagination>

 </div>
</template>

<script>
    export default {
        name: "shopList",
        data(){
            return{
                tableData:[],
                SearchForm:{
                    //当前页码
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    name:"",
                    address:""
                },
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
                //当前页码
                currentPage: 1,
                //每也显示的个数
                pageSize: 3,
                detaileVisiable:false,
                ruleForm:{}
            }
        },
        created() {
            this.initTable()
        },
        methods:{
            initTable(){
               this.$http.post("/system/shop/findAllShop",this.SearchForm).then(result=>{
                   this.tableData = result.data.data.records
                   this.total = result.data.data.total;
               })
            },
            detailedMsg(id){
                this.detaileVisiable = true
                this.$http.post("/system/shop/detailedMsg/"+id).then(result=>{
                    console.log(result)
                    this.ruleForm = result.data.data[0];
                    console.log(this.ruleForm)
                })
            },
            //修改店铺状态
            editStart(start,id){
                this.$http.post("/system/shop/editStart/"+start+"/"+id).then(result=>{
                    this.initTable()
                })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },

        }
    }
</script>

<style scoped>

</style>